<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <div>
      <el-row :gutter="16" type="flex" justify="center">
        <el-col :span="4">
          <div class="文本框" style="height: 800px;">
            <div class="标题">
              富吾财经
            </div>
            <br/>
            <el-menu router>
              <el-menu-item index="/" >
                <div class="小标题">
                  富头条
                </div>
              </el-menu-item>
              <el-menu-item index="/Video" >
                <div class="小标题">
                  视频
                </div>
              </el-menu-item>
              <el-menu-item index="/Live" >
                <div class="小标题">
                  直播
                </div>
              </el-menu-item>
              <el-menu-item index="/" >
                <div class="小标题">
                  资讯
                </div>
              </el-menu-item>
              <el-menu-item index="/CreationCenter" >
                <div class="小标题">
                  富吾号
                </div>
              </el-menu-item>
              <el-menu-item index="/" >
                <div class="小标题">
                  关于我们
                </div>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="文本框">
            <div>
              <el-menu class="el-menu-demo" mode="horizontal" router="1">
                <el-menu-item index="/Video">返回</el-menu-item>
              </el-menu>
            </div>
            <div class="文本框">
              <el-row>
                <el-col :span="16">
                  <div class="视频标题">
                    <el-col>
                      视频标题
                    </el-col>
                    <el-col class="视频信息">
                      123万 播放  发布日期： 2021年1月1日 00:00:00
                    </el-col>
                  </div>
                </el-col>
              </el-row>
              <div style="margin-top: 20px">
                <el-tabs tab-position="right">
                  <el-tab-pane label="第一课">
                    <div class="video">
                      <video-player
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
                      </video-player>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="第二课">
                    <div class="video">
                      <video-player
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
                      </video-player>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="第三课">
                    <div class="video">
                      <video-player
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
                      </video-player>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="第四课">
                    <div class="video">
                      <video-player
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
                      </video-player>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <el-row class="购买区">
              <el-col :span="3" class="价格">
                60 富吾币
              </el-col>
              <el-col :span="4" class="原价">
                原价：300 富吾币
              </el-col>
              <div @click="purchase">
                <el-col :span="6" class="购买框">
                  <h1 style="color: white;margin-left: 15px;margin-top: 4px">购 买</h1>
                </el-col>
              </div>
            </el-row>
            <div class="视频简介">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="视频简介" name="1" >
                  <div>这是视频简介</div>
                  <div>这是视频简介</div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
            </div>
            <div>
              <div style="font-size: 20px; margin-left: 30px">
                评论（共456条）
              </div>
              <div class="发表评论">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入评论内容"
                    v-model="input">
                </el-input>
                <el-button type="primary" style="margin-top: 10px;margin-left: 90%">发表</el-button>
              </div>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
            </div>
            <div class="评论区">
              <div class="评论">
                <el-row>
                  <el-col :span="4">
                    <el-row style="margin-top: 25px">
                      <el-avatar :size="80" :src="circleUrl"></el-avatar>
                    </el-row>
                    <el-row style="margin-top: 5px;margin-left: 15px">
                      用户名
                    </el-row>
                  </el-col>
                  <el-col :span="20">
                    <el-row>评论评论评论评论</el-row>
                    <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-divider class="分割线"></el-divider>
              </div>
              <div class="评论">
                <el-row>
                  <el-col :span="4">
                    <el-row style="margin-top: 25px">
                      <el-avatar :size="80" :src="circleUrl"></el-avatar>
                    </el-row>
                    <el-row style="margin-top: 5px;margin-left: 15px">
                      用户名
                    </el-row>
                  </el-col>
                  <el-col :span="20">
                    <el-row>评论评论评论评论</el-row>
                    <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-divider class="分割线"></el-divider>
              </div>
              <div class="评论">
                <el-row>
                  <el-col :span="4">
                    <el-row style="margin-top: 25px">
                      <el-avatar :size="80" :src="circleUrl"></el-avatar>
                    </el-row>
                    <el-row style="margin-top: 5px;margin-left: 15px">
                      用户名
                    </el-row>
                  </el-col>
                  <el-col :span="20">
                    <el-row>评论评论评论评论</el-row>
                    <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-divider class="分割线"></el-divider>
              </div>
              <div class="评论">
                <el-row>
                  <el-col :span="4">
                    <el-row style="margin-top: 25px">
                      <el-avatar :size="80" :src="circleUrl"></el-avatar>
                    </el-row>
                    <el-row style="margin-top: 5px;margin-left: 15px">
                      用户名
                    </el-row>
                  </el-col>
                  <el-col :span="20">
                    <el-row>评论评论评论评论</el-row>
                    <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-divider class="分割线"></el-divider>
                <el-pagination
                    style="margin-left: 400px; margin-top: 50px"
                    background
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="作者简介">
            <el-row>
              <el-col :span="9">
                <el-avatar :size="60" :src="circleUrl"></el-avatar>
              </el-col>
              <el-col :span="15">
                <div class="文本-标题">
                  aaa
                </div>
                <div class="文本-小-宽间距">
                  0 关注 0 粉丝
                </div>
                <div class="文本-小-宽间距">
                  xxx大学金融学教授
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
.作者简介 {
  background-color: white;
  border: solid 1px #909399;
  border-radius: 8px;
  padding: 20px;
  height: 100px;
  width: 200px;
  margin-top: 100px;
}

.文本-标题 {
  font-size: 20px;
  text-align: left;
}

.视频标题{
  font-size: 30px;
}

.视频信息{
  margin-top: 10px;
  color: #909399;
  font-size: 20px;
}

.文本-小-宽间距 {
  font-size: 12px;
  margin-bottom: 5px;
}

.发表评论{
  margin-top: 10px;
  margin-left: 50px;
  font-size: 20px;
}

.video{
  margin-top: 10px;
  height: 540px;
  width: 960px;
}

.视频简介{
  margin-left: 50px;
  margin-top: 10px;
}

.荣誉栏{margin-left: 50px;
}

.评论{
  margin-left: 70px;
  height: 150px;
}

.背景 {
  background: #f8f7f7;
}

.页眉{
  height: 50px;
  background: #ffffff;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}
.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

.价格{
  margin-top: 10px;
  font-size: 20px;
  margin-left: 550px;
  color: #72adff;
}

.原价{
  margin-top: 10px;
  font-size: 20px;
  color: #909399;
  text-decoration: line-through;
}

.购买框{
  width: 100px;
  height: 50px;
  border-radius: 8px;
  background-color: #72adff;
}

</style>
<script>
export default {
  data() {
    return {
      src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      activeNames: ['1'],
      input:'',
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: require("../assets/video.mp4"), //视频url地址
          },
        ],
        poster: require("../assets/logo.png"), //你的封面地址
// width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        }
      }
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    purchase() {
      this.$confirm('是否购买？这将花费您 60 富吾币', '确认购买', {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '购买成功!'
        });
      })
    }
  }
}
</script>